<template>
    <div class="conten">
        <div class="main">
            <p> 爱图旅游</p>
            <van-cell-group inset class="forms">
                <van-field class="phone" v-model="phone" label="手机号" placeholder="请输入手机号" />
                <van-field class="password" v-model="password" label="密码  " placeholder="请输入密码" />
                <van-button class="btn" type="primary" size="large" @click="loginClick">登录</van-button>
            </van-cell-group>
            <span class="reject">忘记密码</span><span class="reject" @click="$router.push('/registerIndexView')">注册</span>
        </div>

    </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import { loginFn } from '@/API/login';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { showToast } from 'vant';
const router = useRouter()
const password = ref()
const phone = ref()
const user = useUserStore()


// 登录
function loginClick() {
    loginFn({
        phone_number: phone.value,
        password: password.value
    }).then(res => {
        if (res.data.loginStatus.token) {
            user.changeUserState({
                loggedIn: true,
                userId: res.data.userId,
                token: res.data.loginStatus.token
            })
            localStorage.setItem('phone', phone.value)
            localStorage.setItem('password', password.value)
            localStorage.setItem('username', res.data.username)
            showToast(res.data.message);

        }
        router.push('/findView')
        console.log(res)
    }).catch(error =>{
        if(error.response.status == '401'){
            // console.log('密码错误')
            showToast(error.response.data.message);
        }
        console.log(error)
    })
} 
</script>



<style lang="scss" scoped>
.conten {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: url(../../assets/images/login.jpg);

    .main {
        height: 85%;
        // background-color: red;
        width: 90%;
        // background-color: red;
        width: 100%;
        position: fixed;
        bottom: -0.5rem;
        text-align: center;

        .forms {
            margin-bottom: 20px;
            background-color: rgba($color: #000000, $alpha: 0);

            .btn {
                margin-top: 0.3rem;
                background-color: rgba($color: #000000, $alpha: 0.2);
                border: none;
            }
        }

        p {
            font-size: 0.3rem;
        }

        .username,
        .phone,
        .password {
            // margin-bottom: 0.3rem;
            margin-top: 0.3rem;
            background-color: rgba($color: #000000, $alpha: 0.2);
            // border: 1px solid #ccc;
        }

        .phone::placeholder {
            color: red !important;
        }


        .password::placeholder {
            color: blue !important;
            /* 修改密码提示文字颜色为蓝色 */
        }

        .reject {
            position: relative;
            right: -1.3rem;
            margin-left: 0.1rem;

        }
    }
}

</style>7